在下方输入CSS代码来实时改变按钮的样式,然后点击按钮查看效果!
使用这些CSS命令来设计您的按钮:
设置背景颜色或渐变
background: #3498db;
background: linear-gradient(45deg, #ff9966, #ff5e62);
background: radial-gradient(circle, #00c9ff, #92fe9d);
改变文字颜色和字体
color: white;
font-size: 20px;
font-family: Arial;
text-shadow: 0 2px 2px rgba(0,0,0,0.3);
设置边框和圆角
border: 2px solid #3498db;
border: none;
border-radius: 20px;
border-radius: 5px 15px 5px 15px;
添加外部或内部阴影
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
box-shadow: inset 0 0 10px #000000;
box-shadow: 0 0 20px #00ffaa;
改变按钮形状
transform: rotate(5deg);
transform: skewX(-15deg);
width: 200px;
height: 60px;
添加鼠标悬停动画
transition: all 0.4s;
:hover { transform: scale(1.1); }
:hover { box-shadow: 0 0 25px #ff5e62; }